<template>
  <s-modal
    title="表单设计"
    :visible="visible"
    width="1400px"
    ok-text="保存"
    :confirm-loading="confirmLoading"
    :closable="!confirmLoading"
    @ok="save()"
    @cancel="
      () => {
        if (!confirmLoading) {
          visible = false
        }
      }
    "
  >
    <div style="height: 500px">
      <s-dynamic-form-designer
        ref="design"
        style="height: 500px; width: 100%"
        :code="false"
        :form-define="designJson"
      />
    </div>
  </s-modal>
</template>

<script>
export default {
  name: 'FormDesignDialog',
  data() {
    return {
      formValue: {},
      confirmLoading: false,
      visible: false,
      designJson: null
    }
  },
  methods: {
    open(value, flowDefineId, callback) {
      this.callback = callback
      this.formValue = {}
      this.designJson = value == '' ? null : JSON.parse(value)
      this.visible = true
    },
    save() {
      this.callback(JSON.stringify(this.$refs.design.getData()))
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped></style>
